import React, { Component } from 'react';
import Icon from '@ant-design/icons';
import PropTypes from 'prop-types';
import styles from './style.less';
import logo1 from '@/src/assets/comps/other/firstHeader/title_icon.png';
import redlogo from '@/src/assets/comps/other/firstHeader/title_icon_red.png';
import darkBluelogo from '@/src/assets/comps/other/firstHeader/title_icon_darkBlue.png';
import arrow from '@/src/assets/comps/other/firstHeader/arrow.png';

class FirstHeader extends Component {
  // 默认值
  static defaultProps = {
    title: '', // 默认无标题
    Left: '', // 默认不设置
    Right: '', // 默认不设置
    topHeight: false, // margintop-默认不设置
    bottomHeight: true, // marginBottom默认有值
    arrowBtn: false, // 是否显示展开箭头
    showContent: false, // 内容是否展开
    arrowBtnPosition: 'left', // 箭头位置 left,right
    arrowBtnTxt: '', // 箭头文字
    onExpendClick: () => {}, // 展开箭头按钮事件
  };

  constructor(props) {
    super(props);
    this.state = {
      showIncome: false, // 当前是否展开
      changeStatus: null,
    };
  }

  componentDidMount() {
    // eslint-disable-next-line react/no-did-mount-set-state
    this.setState({
      showIncome: this.props.showContent,
    });
  }

  static getDerivedStateFromProps(props, state) {
    if (props.showContent != state.changeStatus) {
      return { showIncome: props.showContent, changeStatus: props.showContent };
    }
    return null;
  }

  // 展开箭头按钮事件
  onExpendClick = (e) => {
    this.setState(
      (prevState) => ({
        showIncome: !prevState.showIncome,
      }),
      () => {
        // 抛出事件，参数为当前展开true/收起false
        this.props.onExpendClick(this.state.showIncome);
      },
    );
  };
  // // 展开箭头按钮事件
  // onExpendClick = (e) => {
  //   this.setState(
  //     {
  //       showIncome: !this.state.showIncome,
  //     },
  //     () => {
  //       // 抛出事件，参数为当前展开true/收起false
  //       this.props.onExpendClick(this.state.showIncome);
  //     },
  //   );
  // };

  render() {
    const { title, Left, Right, topHeight, bottomHeight, arrowBtn, arrowBtnPosition, arrowBtnTxt, colorType } = this.props;
    const { showIncome } = this.state;
    const arrowHtml = arrowBtn ? (
      <div className={styles.arrow_btn} onClick={this.onExpendClick}>
        {arrowBtnTxt} <Icon component={() => <img src={arrow} alt='icon' className={styles.icon} style={{ transform: showIncome ? '' : 'rotate(-180deg)' }} />} />
      </div>
    ) : (
      ''
    );
    let imgUrl;
    switch (colorType) {
      case 'darkBlue':
        imgUrl = darkBluelogo;
        break;
      case 'red':
        imgUrl = redlogo;
        break;
      default:
        imgUrl = logo1;
    }
    return (
      <div className={styles.firstHeader} style={{ marginTop: topHeight ? '20px' : '0', marginBottom: bottomHeight ? '16px' : '0' }}>
        <Icon component={() => <img src={imgUrl} alt='icon' className={styles.icon} />} />
        <div className={styles.title}>
          <div className={styles.left}>
            {title}
            {Left}
            {arrowBtnPosition == 'left' && arrowHtml}
          </div>
          <div className={styles.right}>
            {Right}
            {arrowBtnPosition == 'right' && <div style={{ display: 'inline-block' }}>{arrowHtml}</div>}
          </div>
        </div>
      </div>
    );
  }
}
// props默认值
FirstHeader.propsTypes = {
  title: PropTypes.string, // 标题名
  Left: PropTypes.object, // 加载标题后面的其他元素（可以是ReactNode）
  Right: PropTypes.object, // 加载右侧其他元素（可以是ReactNode）
  topHeight: PropTypes.bool, // margintop-默认不设置
  bottomHeight: PropTypes.bool, // marginBottom
  arrowBtn: PropTypes.bool, // 是否显示展开箭头
  onClick: PropTypes.func, // 展开箭头按钮事件
};

export default FirstHeader;
